@charset "utf-8";


@import "common/common";
@import "common/reset";


.kv_menu{
    position:relative;
    height: 490px;
//  width: 100%;
//  overflow: hidden;
    .menu{
        height: 490px;
        width: 245px;
        background: rgba(255,255,255,.8);
        padding-top: 12px;
        position:absolute;
        left: 55px;
        top:0;
        z-index: 99;
        ol{
            li{
                width: 100%;
                height: 57px;
                a{
                    height: 100%;
                    width: 100%;
                    padding-left: 35px;
                    padding-top: 20px;
                    display: block;
                    list-style: none;
                    color: #333;
                    &:hover{
                        transition: background .5s;
                        background: white;
                    }
                }
                &:hover .phone_m_1{
                    display: block;
                }
            }
        }
        .phone_m_1{
                    display: none;
                    width: 350px;
                    padding-left: 30px;
                    position: absolute;
                    height: 490px;
                    left: 244px;
                    top: 0;
                    background-color: #fff;
                    white-space: nowrap;
                    font-size: 0;
                    box-shadow: 1px 1px 2px rgba(0,0,0,.1);
                    .title_m_1{
                        width: 280px;
                        padding-bottom: 10px;
                        border-bottom: 1px solid #f5f5f5;
                        a{
                            margin-left: -45px;
                            display: block;
                            font-size: 16px;
                            list-style: none;
                            color: #333333;
                            background: none;
                            transition: color .5s;
                            &:hover{
                                color: #00c3f5;
                            }
                            .icon-arrow-right{
                                color: #ACACAC;
                                margin-left: 200px;
                                &:hover{
                                    color: #00c3f5;
                                }
                            
                            }
                        }
                        
                    }
                    .m_phone{
                        width: 300px;
                        a{
                            background: none;
//                          display: inline-block;
                            float: left;
                            height: 50px;
                            width: 100px;
                            font-size: 12px;
                            transition: color .5s;
                            vertical-align: middle;
                            padding-left: 0;
                            margin-right: 45px;
                            margin-bottom: 10px;
                            &:hover{
                                    background: none;
                                    color: #00c3f5;
                                }
                                img{
                                    margin-right: 12px;
                                    height: 100%;
                                    display: inline-block;
                                    vertical-align: middle;
                                }
                                span{
                                    display:inline-block;
                                    vertical-align: middle;
                                }
                            }
                        }
                    }
    }
//  .kv{
//      position: absolute;
//      left: 0;
//      top: 0;
//      li{
//          display: inline-block;
//          height: 490px;
//          img{
//              height: 100%;
//          }
//      }
//  }
    .carousel_wrap{
//      position: absolute;
//      left: 0;
//      top: 0;
        height: 490px;
//      width: 100%;
        .lunbo_wrap {
                position: relative;
                /*border: 1px solid firebrick;*/
                overflow: hidden;
//              width: 100%;
                height: inherit;
            .pic_box {
                height: 100%;
                /*width: 9999px;*/
                white-space: nowrap;
                font-size: 0;
                
            }
            
            .pic_box li {
                position: relative;
                height: 100%;
                /*float: left;*/
                display: inline-block;
                overflow: hidden;
            }
            
            .pic_box li img {
                height: 100%;
                display: block;
                position: absolute;
                top:-9999px;
                bottom:-9999px;
                left:-9999px;
                right:-9999px;
                margin: auto;
            }
            
            .pannel {
                position: absolute;
                left: 0;
                width: 100%;
                bottom: 1%;
                text-align: center;
            }
            
            .pannel li {
                display: inline-block;
                width: 9px;
                height: 9px;
                border-radius: 50%;
                border: 1px solid #9A9999;
                background: none;
                margin-right: 14px;
            }
            #left_arrow,
            #right_arrow {
                cursor: pointer;
                position: absolute;
                top: 50%;
                margin-top: -18px;
                display: block;
                width: 30px;
                height: 60px;
                outline: 0;
                border: none;
                cursor: pointer;
                color: white;
                background-color: transparent;
                transition: .5s;
                text-align: center;
                line-height: 60px;
                opacity: .3;
            }
            
            #left_arrow:hover,
            #right_arrow:hover {
                opacity: .5;
                background-color: rgba(0,0,0,.5);
            }
            
            #left_arrow {
                left: 300px;
            }
            
            #right_arrow {
                right: 50px;
            }
            
            .pannel .active {
                background: #00c3f5;
//              border-color: red;
            }
        }
//          .right_btn{
//              position: absolute;
//              bottom:225px;
//              right:65px;
//              height: 60px;
//              width: 30px;
//              background: none;
//              transition: background-color .9s initial;
//              padding-top: 20px;
//              padding-left: 6px;
//              z-index: 99;
//              background-color: transparent;
//              transition: .5s;
//              &:hover{
//                  background-color: rgba(0,0,0,.5);
//              }
//          }
//          .left_btn{
//              position: absolute;
//              bottom:225px;
//              left:300px;
//              height: 60px;
//              width: 30px;
//              background: none;
//              transition: background-color .9s initial;
//              padding-top: 20px;
//              padding-left: 6px;
//              z-index: 99;
//              background-color: transparent;
//              transition: .5s;
//              &:hover{
//                  background-color: rgba(0,0,0,.5);
//              }
//          }
//      }
    }
}
.menu_one{
    width: $width;
    margin: $margin;
    padding-top: 5px;
    .menu_fir{
        display: inline-block;
        height: 141px;
        width: 244px;
        background: #f9f9f9;
        > ul{
            > li{
                float: left;
                margin-top: 15px;
                margin-left: 43px;
                .iconfont-link-menu{
//                  float: left;
                    display: inline-block;
//                  width: 122px;
                    height: 40px;
                    text-align: center;
                    color: #666;
                    font-size: 12px;
//                  padding: 15px 0;
                    transition: color .5s;
                    z-index: 2;
                    .iconfont{
                        display: block;
                        font-size: 24px;
                        margin-bottom: 2px;
                        font-weight: 100;
                    }
                    &:hover{
                    color: #999;
                    }
                }
                &:last-of-type{
                    margin-left: 40px;
                }
                &:nth-of-type(3){
                    margin-left: 50px;
                }
                
            }
        }
    }
    div{
        display: inline-block;
        height: 140px;
        width: 244px;
    }
    div:last-of-type{
        margin: 0;
    }
}
.menu_hot{
    width: $width;
    margin: $margin;
    border-bottom: 1px solid #fafafa;
    padding-top: 40px;
    position: relative;
    h4{
        margin-bottom: 24px;
    }
    .kv_btn{
        position: absolute;
        right: 5px;
        top: 50px;
        a{
            padding: 7px 9px;
            border: 1px solid #bdbdbd;
            color: #bdbdbd;
            transition: color .5s;
            &:hover{
                color: #00c3f5;
                border-color: #00c3f5;
            }
        }
    }
    .content_phone{
        display: block;
        text-align: center;
        height: 342px;
        width: 247px;
        border: 1px solid #efefef;
        list-style: none;
        float: left;
        transform: z-index .9s;
        &:hover{
                border: 1px solid #BDBDBD;
                transition: border-color .8S,z-index 0s;
        }
        .image_phone{
            display: block;
            height: 180px;
            width: 180px;
            margin: 36px auto 0;
                img{
                height: 100%;
                width: 100%;
            }
        }
        h4{
            font-size: 14px;
            color: #555757;
            margin-top: 40px;
            margin-bottom: 0;
        }
        h6{
            font-size: 12px;
            color: #999;
            margin-top: 2px;
        }
        p{
            color: #e02b41;
            font-size: 12px;
            margin-top: 5px;
        }
    }
}
.advertising_1{
    width: $width;
    margin: $margin;
    margin-top: 25px;
    margin-bottom: 25px;
    height: 121px;
    border-bottom: 1px solid rgba(255,255,255,.8);
    border-top: 1px solid rgba(255,255,255,.8);
    img{
        width: 100%;
        height: 100%;
    }
}
.advertising{
    width: $width;
    margin: $margin;
//  text-align: center;
    display: inline-block;
    margin-top: 39px;
    margin-bottom: 25px;
    height: 121px;
    border-bottom: 1px solid rgba(255,255,255,.8);
    border-top: 1px solid rgba(255,255,255,.8);
    img{
        width: 100%;
        height: 100%;
    }
}
.phone_bg{
    width: 100%;
    height: 2720px;
    background: #f5f5f5;
    .phone_menu{
        width: $width;
        margin: $margin;
        height: 2720px;
        background: #f5f5f5;
        .the_one{
            padding-top: 42px;
            .title{
                margin-bottom: 15px;
                h4{
                    display: inline-block;
                    font-size: 26px;
                    text-align: left;
                    margin-right: 30px;
                }
                .hot_link{
                    display: inline-block;
                    a{
                        list-style: none;
                        color: #00c3f5;
                        &::after{
                            content: "";
                            display: block;
                            background: #00c3f5;
                            height: 2px;
                            width: 100%;
                            margin-top: 5px;
                        }
                    }
                    
                }
                .more{
                    float: right;
                    a{
                        list-style: none;
                        color: #000000;
                        font-size: 12px;
                        transition: color .3s;
                        &:hover{
                            color: #00c3f5;
                        }
                    }
                }    
            }
            .phone_menu_1{
                height: 690px;
                ul{
                    li{
                        width: 244;
                        height: 341px;
                        display: inline-block;
                        margin-bottom: 5px;
                        a{
                            width: 244;
                            height: 341px;
                            text-align: center;
                            display: block;
                            transition: .2s;
                            &:hover{
                                transform: translate3d(0, -2px, 0);
                                box-shadow: 0 15px 30px rgba(0,0,0,.1);
                            }
                        }
                    }
                    li:first-of-type{
                        a:hover{
                            transform: translate3d(0, 0, 0);
                            margin-top: 0;
                            box-shadow: none;
                        }
                    }
                    li:nth-of-type(5n){
                        margin-right: 0;
                    }
                }
            }
        }
        .the_two{
            padding-top: 20px;
            .title{
                margin-bottom: 15px;
                h4{
                    display: inline-block;
                    font-size: 26px;
                    text-align: left;
                    margin-right: 30px;
                }
                .hot_link{
                    display: inline-block;
                    a{
                        list-style: none;
                        color: #00c3f5;
                        &::after{
                            content: "";
                            display: block;
                            background: #00c3f5;
                            height: 2px;
                            width: 100%;
                            margin-top: 5px;
                        }
                    }
                    
                }
                .more{
                    float: right;
                    a{
                        list-style: none;
                        color: #000000;
                        font-size: 12px;
                        transition: color .3s;
                        &:hover{
                            color: #00c3f5;
                        }
                    }
                }    
            }
            .phone_menu_1{
                height: 690px;
                ul{
                    li{
                        border-bottom: 1px solid rgba(255,255,255,.3);
                        border-top: 1px solid rgba(255,255,255,.3);
                        display: inline-block;
                        margin-bottom: 5px;
                        a{
                            height: 341px;
                            display:block;
                            transition: .2s;
                            &:hover{
                                transform: translate3d(0, -2px, 0);
                                box-shadow: 0 15px 30px rgba(0,0,0,.1);
                            }
                        }
                    }
                    li:first-of-type{
                        a:hover{
                            transform: translate3d(0, 0, 0);
                            margin-top: 0;
                            box-shadow: none;
                        }
                    }
                    li:nth-of-type(5n){
                        margin-right: 0;
                    }
                }
            }
        }
        .the_thr{
            padding-top: 20px;
            .title{
                margin-bottom: 20px;
                h4{
                    display: inline-block;
                    font-size: 26px;
                    text-align: left;
                    margin-right: 30px;
                }
                .hot_link_1{
                    display: inline-block;
                    margin-right: 30px;
                    a{
                        list-style: none;
                        color: #000000;
                        transition: color .2s;
                        &:hover{
                            color: #00c3f5;
                        }
                        &:hover .menu_warp{
                            display: block
                        }
                        &.active::after{
                            content: "";
                            display: block;
                            background: #00c3f5;
                            height: 2px;
                            width: 100%;
                            margin-top: 3px;
                        }
                        &::after{
                            content: "";
                            display: block;
                            background: #00c3f5;
                            height: 2px;
                            width: 100%;
                            margin-top: 3px;
                            display: none;
                        }
                        &:hover::after{
                            display: block;
                        }
                        &:active{
                            color: #00c3f5;
                        }
                    }
                }
                .hot_link_2{
                    display: inline-block;
                    margin-right: 30px;
                    a{
                        list-style: none;
                        color: #000000;
                        transition: color .2s;
                        &:hover{
                            color: #00c3f5;
                        }
                        &:hover .menu_warp_2{
                            display: block;
                        }
                        &::after{
                            content: "";
                            display: block;
                            background: #00c3f5;
                            height: 2px;
                            width: 100%;
                            margin-top: 3px;
                            display: none;
                        }
                        &:hover::after{
                            display: block;
                        }
                    }
                }
                .hot_link_3{
                    display: inline-block;
                    margin-right: 30px;
                    a{
                        list-style: none;
                        color: #000000;
                        transition: color .2s;
                        &:hover{
                            color: #00c3f5;
                        }
                        &::after{
                            content: "";
                            display: block;
                            background: #00c3f5;
                            height: 2px;
                            width: 100%;
                            margin-top: 3px;
                            display: none;
                        }
                        &:hover::after{
                            display: block;
                        }
                    }
                }
                .more{
                    float: right;
                    a{
                        list-style: none;
                        color: #000000;
                        font-size: 12px;
                        transition: color .3s;
                        &:hover{
                            color: #00c3f5;
                        }
                    }
                }    
            }
            .phone_menu_3{
                position: relative;
                height: 690px;
                .menu_warp{
                    position: absolute;
                    left: 0;
                    top: 0;
                    ul{
                        li{
                            border-bottom: 1px solid rgba(255,255,255,.3);
                            border-top: 1px solid rgba(255,255,255,.3);
                            display: inline-block;
                            margin-bottom: 5px;
                            a{
                                height: 341px;
                                display: block;
                                transition: .2s;
                                &:hover{
                                    transform: translate3d(0, -2px, 0);
                                    box-shadow: 0 15px 30px rgba(0,0,0,.1);
                                }
                            }
                        }
                        li:first-of-type{
                            a:hover{
                                margin-top: 0;
                                transform: translate3d(0, 0, 0);
                                box-shadow: none;
                            }
                        }
                        li:nth-of-type(5n){
                            margin-right: 0;
                        }
                    }
                }
                .menu_warp_2{
                    display: none;
                    ul{
                        li{
                            border-bottom: 1px solid rgba(255,255,255,.3);
                            border-top: 1px solid rgba(255,255,255,.3);
                            float: left;
                            margin-right: 5px;
                            a{
                                height: 341px;
                                display: block;
                                transition: .2s;
                                &:hover{
                                    transform: translate3d(0, -2px, 0);
                                    box-shadow: 0 15px 30px rgba(0,0,0,.1);
                                }
                            }
                        }
                        li:nth-of-type(5n){
                            margin-right: 0;
                        }
                    }
                }
                
    //          ul:nth-of-type(2){
    //              position: absolute;
    //              left: 0;
    //              top: 0;
    //              li{
    //                  border-bottom: 1px solid rgba(255,255,255,.3);
    //                  border-top: 1px solid rgba(255,255,255,.3);
    //                  float: left;
    //                  margin-right: 5px;
    //                  display: none;
    //                  a:hover{
    //                      box-shadow: 2px 2px 10px #000000;
    //                  }
    //              }
    //              li:nth-of-type(5n){
    //                  margin-right: 0;
    //              }
    //          }
    //          ul:nth-of-type(3){
    //              li{
    //                  border-bottom: 1px solid rgba(255,255,255,.3);
    //                  border-top: 1px solid rgba(255,255,255,.3);
    //                  float: left;
    //                  margin-right: 5px;
    //                  display: none;
    //                  a:hover{
    //                      box-shadow: 2px 2px 10px #000000;
    //                  }
    //              }
    //              li:nth-of-type(5n){
    //                  margin-right: 0;
    //              }
    //          }
    //          ul:nth-of-type(2):target{
    //              display: block;
    //          }
    //          ul:last-of-type:target{
    //              display: block;
    //          }
            }
        }
    }
}
